<template>
	<view class="page" :style="{'min-height':h+'px','padding-top':mt+'px'}">
		<c-nav-bar :title="title"></c-nav-bar>
		<image class="top_img" :src="contentall.appearancePic"></image>
		<view class="content">
			<view class="c_info">
				<view class="ci_title">{{contentall.name}}</view>
				<view class="ci_tip">
					<view class="cit_l">{{contentall.venuesDescribe}}</view>
					<view class="cit_r">
						<u-icon name="eye" size="30rpx" color="#666666"></u-icon>
						<span>{{contentall.browseNumber}}次浏览</span>
					</view>
				</view>
				<view class="ci_pre">
					<u-icon name="clock" size="26rpx" color="#666666"></u-icon>
					<view class="cip_text">
						<text>场馆收费：</text>
						<span>免费</span>
					</view>
				</view>
				<view class="ci_pre">
					<u-icon name="clock" size="26rpx" color="#666666"></u-icon>
					<view class="cip_text">
						<text>开放时间：</text>
						<span>{{contentall.openingHours}}</span>
					</view>
				</view>
				<view class="ci_pre ci_pre_addr">
					<view>
						<u-icon name="map" size="28rpx" color="#666666"></u-icon>
						<view class="cip_text">
							<text>场馆地址：</text>
							<span>{{contentall.address}}</span>
						</view>
					</view>
					<image @tap="openNavigation"
						src="https://i.ringzle.com/file/20231213/3341e33055e04e28ac18add51186fe77.png"></image>
				</view>
			</view>
			<view class="c_introduce">
				<view class="ci_title">场馆介绍</view>
				<view class="ci_html">
					<u-parse :content="contentall.venuesIntroduce"></u-parse>
				</view>
			</view>
			<block v-if="contentall.picList&&contentall.picList.length>0">
				<view class="allimg" v-for="(item, index) in contentall.picList" :key="index">
					<!-- <u--image width="700rpx"  :src="item"  mode=""></u--image> -->
					<image v-if="item" :src="item" mode="scaleToFill"></image>
				</view>
			</block>

			<view class="wuyong">

			</view>
		</view>

		<!-- <view class="dibu">
			<view class="pjsc">
				<view class="pinglun">
					<view class="">
							<u-icon name="share-square" size="40rpx" color="#666666"></u-icon>
					</view>
					<view class="">
						评论
					</view>
				</view>
				<view class="pinglun">
					<view class="">
							<u-icon name="heart-fill" size="40rpx" color="#666666"></u-icon>
					</view>
					<view class="">
						收藏
					</view>
				</view>
			</view>
				<view class="ruguan">
				<view class="guanyuyue" @click="yuguanyuyue">
					入馆预约
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight - 56,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				title: '',
				contentall: {},
				item: null,
				isDz: false,
				dzNum: 9,
				isPl: false,
				plNum: 45,
				isSc: false,
				scNum: 45,

			}
		},
		onLoad(option) {
			console.log('111111111111111111', option)

			if (option.wenhuaid) {
				//this.item = JSON.parse(decodeURIComponent(option.item));
				this.$api.get('/api/culturalVenues/details', {
						//venuesType: this.item.venuesType,
						ismapId: option.wenhuaid
					})
					.then(res => {
						this.contentall = res.data.data;
						console.log('555555555555555', res.data.data)
						//  this.list=res.data.data;
					})

				//this.title = this.item.title;
			}
		},
		methods: {
			openNavigation() {
				uni.openLocation({
					latitude: this.contentall.latitude,
					longitude: this.contentall.longitude,
					name: this.contentall.name,
					address: this.contentall.address
				})
			},
			yuguanyuyue() {
				uni.navigateTo({
					url: '/pagesIndex/culturalTour/booktickets?item=' + encodeURIComponent(JSON.stringify(this
						.contentall)),

				})

			},




		}
	}
</script>

<style scoped lang="less">
	.wuyong {
		width: 100%;
		height: 90rpx;
	}

	.allimg {
		// width: 710rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		&>image {
			width: 670rpx;
			height: 447rpx;
			margin: 10rpx auto 30rpx;
		}
	}

	.guanyuyue {
		// width: 400rpx;
		width: 100%;
		height: 80rpx;
		border-radius: 50rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 40rpx;
		background: #007A69;
		color: #fff;
	}

	.ruguan {
		// width: 450rpx;
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;

		padding: 0 25rpx;
		box-sizing: border-box;
	}

	.pjsc {
		width: 300rpx;
		height: 120rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.dibu {
		width: 750rpx;
		height: 120rpx;
		background: #fff;
		display: flex;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		right: 0rpx;
		z-index: 999;
	}

	.page {
		overflow-y: scroll;

		.top_img {
			width: 100%;
			height: 380rpx;
			position: relative;
			z-index: 1;
		}

		.content {
			width: 100%;
			background: #fff;
			border-radius: 24rpx 24rpx 3rpx 3rpx;
			box-sizing: border-box;
			padding: 48rpx 30rpx 41rpx;
			margin-top: -20rpx;
			position: relative;
			z-index: 2;

			.c_info {
				padding-bottom: 37rpx;

				.ci_title {
					font-size: 48rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					color: #111111;
					line-height: 48rpx;
				}

				.ci_tip {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 30rpx 0 22rpx;

					.cit_l {
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #0065B5;
						line-height: 28rpx;
					}

					.cit_r {
						display: flex;

						span {
							margin-left: 16rpx;
							font-size: 24rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #333333;
						}
					}
				}

				.ci_pre {
					margin-top: 42rpx;
					display: flex;
					align-items: center;

					.cip_text {
						margin-left: 12rpx;

						text {
							font-size: 26rpx;
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							color: #333333;
						}

						span {
							font-size: 26rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #333333;
							margin-left: 4rpx;
						}
					}

					&.ci_pre_addr {
						margin-top: 31rpx;

						&>view {
							display: flex;
							align-items: center;
						}

						justify-content: space-between;

						image {
							width: 106rpx;
							height: 48rpx;
						}
					}
				}
			}

			.c_introduce {
				border-top: 1rpx solid #EFEFEF;
				margin-bottom: 40rpx;
				width: 100%;
				background: #fff;
				padding: 49rpx 0 0;

				.ci_title {
					padding-left: 18rpx;
					font-size: 36rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					color: #111111;
					position: relative;

					&::before {
						content: '';
						width: 8rpx;
						height: 32rpx;
						background: #0280B0;
						border-radius: 3rpx;
						position: absolute;
						left: 0;
						top: 50%;
						margin-top: -16rpx;
					}
				}

				.ci_html {
					width: 100%;
					padding: 30rpx 10rpx 0;
					box-sizing: border-box;
				}
			}
		}
	}
</style>